{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">

    <style>
        body {
            background: url("{% static  'bj.jpg' %}");
            background-attachment: fixed;
            background-size: cover;
        }

        th {
            color: white;
        }
    </style>
</head>
<body>
<div style="color: white;text-align: left;margin-left: 300px">

    <label style="position:absolute;left: 28%;top: 10%;color: red;font: bold 30px/30px 微软雅黑">json字符串1</label>
    <textarea style="color:black;font-size:18px;position:absolute;left: 20%;top: 15%;width: 25%;height: 25%"
              id="json1"></textarea>

    <label style="position:absolute;left: 55%;top: 10%;color: red;font: bold 30px/30px 微软雅黑">json字符串2</label>
    <textarea style="color:black;font-size:18px;position:absolute;left: 50%;top: 15%;width: 25%;height: 25%"
              id="json2"></textarea>

    <button onclick="compare_json()" style="width: 350px;position: absolute;left: 730px;top:45% "
            class="btn btn-success">开始比对
    </button>

{#        <textarea id="json_res"#}
{#                  style="display:none;font-size:18px;color:black;position: absolute;left: 35%;top: 50%;width: 25%;height: 25%"></textarea>#}


    <div id="json_res" class="table-responsive"
         style="display:none;width: 40%;color: black;position: absolute;left: 30%;top: 52%">
        <table class="table table-bordered table-striped" id="mytable" style="background-color:white">
            <thead style="color: #090a35;font-size: large">
            <tr style="text-align: center">
                <td style="width: 10%">序号</td>
                <td style="width: 30%;">不同的位置</td>
            </tr>
            </thead>
            <tbody id="mytbody">
                        <tr>
                            <td>1</td>
                            <td>结果1</td>

                        </tr>
            </tbody>
        </table>
    </div>

</div>
    <script>
    function compare_json(){
        var json1=$("#json1").val();
        var json2=$("#json2").val();

        if(json1 =="" ||json2==""){
            alert("请输入2个json字符串");
            return
        }
{#        console.log(json1,json2);#}

        $.get("/compare_json/",{
        "json1":json1.toString(),
        "json2":json2.toString(),
        },function(ret){
            document.getElementById("json_res").style.display = 'block';
            //document.getElementById('mytbody').innerHTML = "<tr><td></td><td></td></tr>";
            ret = eval(ret);
            console.log(ret);
            //console.log(typeof ret);



            tbody = document.getElementById("mytbody")
            for(var i=1;i<ret.length;i++){
                console.log(i);
                console.log(ret[i]);
                 var t1 = document.createElement('tr');
                var t2 = document.createElement("td")

                tbody.appendChild(t1);
                tbody.appendChild(t2);

            }
        })

}
    </script>


</body>
</html>